import { useState, useEffect } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useSelector } from "react-redux";
import { NavBar, InfiniteScroll, Switch, PullToRefresh } from "antd-mobile";
import http from "../../utils/http";
// 引入切换日期的组件
import MyNavDate from "../../components/MyNavDate";
import styles from "./index.module.css";

const Index = () => {
    //获取地址栏查询参数
    const navigate = useNavigate();
    const { start, end, date } = useSelector((state) => state.CitySlice);
    const [sq, setSq] = useSearchParams();
    const isSped = sq.get("isSpeed");
    //定义查询参数：page 分页  isSeat 是否选择座位 isDesc 是否降序
    const [page, setPage] = useState(1);
    const [isSeat, setIsSeat] = useState(false);
    const [isDesc, setIsDesc] = useState(false);
    const [isSpeed, setIsSpeed] = useState(isSped);
    //定义列表数据
    const [QueryList, setQueryList] = useState([]);
    const [hasMore, setHasMore] = useState(true);

    //请求数据的方法
    const getQueryList = async () => {
        const res = await http.post("/api/trip/train", {
            start,
            end,
            date,
            page,
            isSpeed,
            isSeat,
            isDesc,
        });

        const { code, data } = res.data;
        if (code === 200) {
            setQueryList([...QueryList, ...data]);
            setPage((pre) => pre + 1);
        }

        if (data.length === 0) {
            setHasMore(false);
        }
    };

    useEffect(() => {
        getQueryList();
    }, []);

    //跳转到详情页
    const handelToDetail = (id) => {
        navigate(`/detail/${id}`);
    };

    return (
        <div>
            
            <NavBar onBack={() => navigate("/")}>
                <p className={styles.list_tit}>
                    {start} <span>→</span> {end}
                </p>
            </NavBar>
            {/* 调用切换日期的组件 */}
            
            <MyNavDate date={date}></MyNavDate>
            {/* 车次列表渲染 */}
            <PullToRefresh>
                <div className={styles.list_container}>
                    {QueryList.length > 0 &&
                        QueryList.map((item, ind) => (
                            <div
                                key={ind}
                                className={styles.listItem}
                                onClick={() => handelToDetail(item.id)}
                            >
                                <div className={styles.item_left}>
                                    <span>{item.start}</span>
                                    <span>{item.end}</span>
                                    <span>{item.startTime}</span>
                                    <span>
                                        一等座 <b>有票</b>
                                    </span>
                                    <span>
                                        二等座 <b>有票</b>
                                    </span>
                                    <span>
                                        商务座 <b>有票</b>
                                    </span>
                                </div>
                                <div className={styles.item_right}>
                                    <span>￥{item.tick.secondTick}</span>
                                </div>
                            </div>
                        ))}
                </div>
                <InfiniteScroll loadMore={getQueryList} hasMore={hasMore} />
                <div className={styles.filterList}>
                    <div>
                        <Switch
                            checked={isSpeed}
                            onChange={(val) => {
                                setIsSpeed(val);
                                setPage(1);
                                setQueryList([]);
                            }}
                        />
                        是否高铁
                    </div>
                    <div>
                        <Switch
                            checked={isSeat}
                            onChange={(val) => {
                                setIsSeat(val);
                                setPage(1);
                                setQueryList([]);
                            }}
                        />
                        是否有票
                    </div>
                    <div>
                        <Switch
                            checked={isDesc}
                            onChange={(val) => {
                                setIsDesc(val);
                                setPage(1);
                                setQueryList([]);
                            }}
                        />
                        升序降序
                    </div>
                </div>
            </PullToRefresh>

        </div>
    );
};

export default Index;
